<template>
  <div class="box_container">
    <a-form
      :form="form"
      :label-col="{span: 2, offset: 0}"
      :wrapper-col="{span: 15, offset: 0}">
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="申请人"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <div class="apply-item">
              {{leaveInfo.applyer}}
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="所属部门"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <div class="apply-item">
              {{leaveInfo.departName}}
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="填表日期"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <div class="apply-item">
              {{leaveInfo.applyDate}}
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="请假类型"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <div class="apply-item">
              {{filterLeaveType}}
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="开始时间"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <div class="apply-item">
              {{leaveInfo.leaveDetailForm.startTime}}
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="结束时间"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <div class="apply-item">
              {{leaveInfo.leaveDetailForm.endTime}}
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="总计时长"
            :label-col="{span: 6, offset: 0}"
            :wrapper-col="{span: 15, offset: 0}">
            <div class="apply-item">
              {{leaveInfo.leaveDetailForm.leaveDays}}
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="请假事由">
        <div class="apply-item-area">
          {{leaveInfo.leaveDetailForm.leaveReason}}
        </div>
      </a-form-item>
      <a-form-item label="说明附件">
        <template>
          <ul class="img_upload_wrapper" v-if="listImgAll[0]">
            <li v-for="(item, index) in listImgAll" :key="index">
              <img :src="imgMainUrl + item" alt="">
            </li>
          </ul>
          <div v-else style="margin-left: 10px">无</div>
        </template>
      </a-form-item>
      <a-form-item label="备注">
        <div class="apply-item-area">
          {{leaveInfo.leaveDetailForm.leaveComment}}
        </div>
      </a-form-item>
      <a-form-item class="form-item-bt-custom">
        <a-button @click="$emit('update:showChild', false)">关闭</a-button>
      </a-form-item>
    </a-form>

  </div>
</template>

<script>
import { imgMainUrl } from '@/config/leave.config'

export default {
  name: 'HandleLeaveFormDetail',
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    },
    showChild: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    leaveTypes () {
      return this.$store.getters.leaveTypes
    },
    filterLeaveType () {
      const leaveTypes = this.leaveTypes
      const leaveType = this.detailInfo.leaveDetailForm.leaveType
      let temp_desc = ''
      for (let i = 0; i < leaveTypes.length; i++) {
        if (leaveTypes[i]['item_val'] === leaveType) {
          temp_desc = leaveTypes[i]['item_desc']
          break
        }
      }
      return temp_desc
    },
  },
  data () {
    return {
      imgMainUrl,
      form: this.$form.createForm(this, {}),
      listImgAll: [],
      leaveInfo: {
        leave_type: '',
        applyer: '',
        departName: '',
        applyDate: '',
        start_time: null,
        end_time: null,
        leave_days: 0,
        leave_reason: '',
        leave_enclosure: '',
        procDefId: '',
        procDeTitle: '',
        leave_comment: '',
        sendMessage: true,
        tableName: 'leave_detail_form',
        filedNames: 'leave_type,start_time,end_time,leave_days,leave_reason,leave_enclosure'
      }
    }
  },
  created () {

  },
  mounted () {
    Object.assign(this.leaveInfo, this.detailInfo)
    this.listImgAll = this.leaveInfo.leave_enclosure.split(',')
    console.log('detailInfo-approve', this.detailInfo)
  },
  methods: {
    filterDictsValue (value) {
      const list = this.leaveTypes
      let txt = ''
      for (let i = 0; i < list.length; i++) {
        if (list[i]['item_val'] === value) {
          txt = list[i]['item_desc']
          break
        }
      }
      return txt
    },
  }
}
</script>

<style scoped lang="less">
.upload-wrapper {
  display: flex;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 108px;
  height: 108px;
  cursor: pointer;
  line-height: 108px;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  span {
    display: inline-block;
    margin-top: 5px;
    line-height: 0;
    font-size: 12px;
    font-weight: 300;
  }
  &:hover {
    border: 1px dashed #389FFD;
  }
}
.img_upload_wrapper {
  list-style:none;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 0;
  li {
    position: relative;
    width: 104px;
    height: 104px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #E2E7F2;
    overflow: hidden;
    margin-right: 10px;
    img {
      width: 88px;
      height: 88px;
      margin-left: 8px;
      margin-top: 8px;
    }
  }
}
.apply-item {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  padding: 0 10px;
  border-radius: 4px;
}
.apply-item-area {
  line-height: 32px;
  min-height: 100px;
  height: auto;
  border: 1px solid #ccc;
  padding: 0 10px;
  border-radius: 4px;
  word-break: break-all;
  white-space: normal;
}
</style>
